
<template>
	<view class="nav-container" :style="{bottom: position === 'bottom' ? '30px' : 'auto'}">
		<view class="button-group">
			<button class="nav-btn prev-btn" :class="{ disabled: current <= 1 }"  @click="handlePrev"
				:disabled="current <= 1">
				上一页
			</button>
			<view class="center">
				<input 
					class="current-input" 
					type="number" 
					v-model.number="inputValue" 
					@blur="handleInputChange"
					@keyup.enter="handleInputChange"
					:min="1" 
					:max="total"
				>
				<view class="size">
					/{{total}}
				</view>
			</view>
			<button class="nav-btn next-btn" :class="{ disabled: current >= total }" @click="handleNext"
				:disabled="current >= total">
				下一页
			</button>
		</view>
		<Dialog :show="showDialog" :explain='explain' @confirm="handleConfirm"></Dialog>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 1
			},
			total: {
				type: Number,
				required: true
			},
			position: {
				type: String,
				default: 'bottom'
			}
		},
		data(){
			return{
				showDialog: false,
				explain: {},
				inputValue: 1
			}
		},
		watch: {
			current(newVal) {
				console.log('newVal', newVal);
				this.inputValue = newVal
			}
		},
		methods: {
			async openDialog(str) {
				this.explain = await this.$DESCRIBE(str)
				this.showDialog = true
			},
			handleConfirm() {
				this.showDialog = false
			},
			handlePrev() {
				if (this.current > 1) {
					this.$emit('change', this.current - 1)
				}
			},
			handleNext() {
				if (this.current < this.total) {
					this.$emit('change', this.current + 1)
				}
			},
			handleInputChange() {
				let value = parseInt(this.inputValue)
				if (isNaN(value) || value < 1) {
					value = 1
				} else if (value > this.total) {
					value = this.total
				}
				this.inputValue = value
				this.$emit('change', value)
			}
		},
		created() {
			this.inputValue = this.current
		}
	}
</script>

<style lang="scss">
	.center{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex: 1;
		.current-input{
			width: 76rpx;
			height: 66rpx;
			background: #f6f6f6;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: center;
			color: #333333;
			border: none;
			outline: none;
		}
		.size{
			margin:0 15rpx 0 6rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #333333;
		}
	}
	.nav-container {
		position: fixed;
		left: 0;
		bottom: 0!important;
		z-index: 1000;
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
		padding-top: 16rpx;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin: 0 20rpx;
	}

	.nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 248rpx !important;
		height: 88rpx !important;
		background: #73F0EA;
		font-size: 34rpx;
		border-radius: 16rpx;
		color: #fff;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.nav-btn.disabled {
		background: #fff;
		border: 1rpx solid #73F0EA;
		font-size: 34rpx;
		font-weight: 700;
		color: #73F0EA !important;
		opacity: 0.7;
		box-shadow: none;
	}

	.nav-btn:active {
		transform: scale(0.95);
	}
</style>
